<script setup lang="ts">
import {ref} from "vue";
import {
  projectAll,projectInfoById,
} from "@/pages/project/projectManagement/index.js";
import TableTemplate from "@/pages/account/components/tableTemplate.vue";
import {ElMessage} from "element-plus";
import DialogTemplate from "@/pages/account/components/dialogTemplate.vue";
import {useUserStore} from "@/pinia/stores/user";
import {editProjectFunding, exportFundingList, getFundingList} from "@/pages/funding/index.js";
const loading = ref(false)
const userStore = useUserStore()
const userData = userStore.userInfo
const registerDialogRef = ref(null)
const type = ref([])
//审核弹窗便签
const activeName = ref('first')
//表格引用
const registerTableRef = ref(null)
// 弹窗引用
const dialogTemplateRef = ref(null)
// 弹窗引用
const dialogTemplateVisible = ref(false)
// 弹窗标题引用
const title = ref('')
// 弹窗表单数据
const initialData = ref({})
let formItems = ref([
  {
  title: '项目信息',
  list: [
    {
      label: '项目名称',
      prop: 'title',
      type: 'input',
      rules: [
        {required: true, message: '请输入项目名称', trigger: 'blur'},
        {min: 3, max: 10, message: '长度在 3 到 30 个字符', trigger: 'blur'}
      ],
      placeholder: '请输入项目名称'
    },
    {
      label: '项目负责人',
      prop: 'username',
      type: 'input',
      rules: [
        {required: true, message: '请输入项目负责人', trigger: 'blur'},
        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
      ],
      placeholder: '请输入项目负责人'
    },
    {
      label: '项目成员',
      prop: 'menber',
      type: 'input',
      rules: [
        {required: true, message: '请输入其他项目成员,多个以英文逗号分隔', trigger: 'blur'},
        {min: 2, max: 40, message: '长度在 2 到 40 个字符', trigger: 'blur'}
      ],
      placeholder: '请输入其他项目成员'
    },
    {
      label: '项目类型',
      prop: 'type',
      type: 'select',
      options: type.value,
      placeholder: '请选择项目类型'
    },
    {
      label: '指导老师',
      prop: 'instructor',
      type: 'input',
      placeholder: '请选择指导老师'
    },
    {
      label: "是否支持下载",
      prop: "download",
      type: "switch",
      value: 0,
    },
    {
      label: '项目图片',
      prop: 'projectImg',
      type: 'uploadImage',
      multiple: true,
      limit: 1,
      rules: [
        {required: true, message: '请上传项目图片', trigger: 'blur'}
      ],
      placeholder: '请上传项目图片'
    },
    {
      label: '项目附件',
      prop: 'file',
      type: 'uploadFile',
      multiple: true,
      limit: 1,
      rules: [
        {required: true, message: '请上传项目附件', trigger: 'blur'}
      ],
      placeholder: '请上传项目附件'
    }
  ]
},
  {
  title: '资金申请详情',
  list: [
    {
      label: '审核人',
      prop: 'reviewer',
      type: 'input',
      placeholder: '请输入审核人'
    },
    {
      label: '审核状态',
      prop: 'status',
      type: 'select',
      options: [
        {label: '待审核', value: 0},
        {label: '通过', value: 1},
        {label: '不通过', value: 2},
        {label: '驳回', value: 3},
      ],
      placeholder: '请选择审核状态'
    },
    {
      label: '申请总金额/万元',
      prop: 'funding',
      type: 'input',
      placeholder: '请输入申请总金额/万元'
    },
    {
      label: '设备采购',
      prop: 'equipment',
      type: 'input',
      placeholder: '请输入设备采购'
    },
    {
      label: '设备采购金额/万元',
      prop: 'equipmentMoney',
      type: 'input',
      placeholder: '请输入设备采购金额/万元'
    },
    {
      label: '材料采购',
      prop: 'materialCost',
      type: 'input',
      placeholder: '请输入材料采购'
    },
    {
      label: '材料采购金额/万元',
      prop: 'materialMoney',
      type: 'input',
      placeholder: '请输入材料采购金额/万元'
    },
    {
      label: '其他费用',
      prop: 'otherCost',
      type: 'input',
      placeholder: '请输入其他费用'
    },
    {
      label: '其他费用金额/万元',
      prop: 'otherMoney',
      type: 'input',
      placeholder: '请输入其他费用金额/万元'
    },
  ]}
])
// 是否查看模式
const isViewMode = ref(false)
// 弹窗提交的数据
const formData = ref({})
// 操作名称
const operationName = ref('')
//选中的行
const handleIndex = ref([])
const handleChange = (data) => {
  handleIndex.value = data
}

const projectTypeAll = async () => {
  //获取项目类型
  let data = await projectAll()
  for (let i = 0; i < data.data.length; i++) {
    type.value.push({
      label: data.data[i].projectType,
      value: data.data[i].projectType
    });
  }
}

let dataSet = reactive({
  queryBox: [
    {
      model: 'projectName',
      type: 'input',
      placeholder: '请输入项目名称'
    },
    {
      model: 'username',
      type: 'input',
      placeholder: '项目发起人'
    },
    {
      model: 'projectType',
      type: 'select',
      placeholder: '项目类型',
      options: type.value,
    },
  ],
  tableList: [
    {prop: 'projectName', label: '项目名称', width: '180'},
    {prop: 'username', label: '项目发起人', width: '100'},
    {prop: 'projectType', label: '项目类型', width: '150'},
    {prop: 'reviewer', label: '审核人', width: '150'},
    {prop: 'instructor', label: '指导老师', width: '180'},
    {prop: 'funding', label: '资金金额/万元', width: '180'},
    {prop: 'createTime', label: '审核时间', width: '180'}
  ],
  tnQueryTop: [
    {name: '导出', click: 'exportProjectExcel', type: 'primary'},
  ],
  tableListSubmit: [
    {prop: 'status', label: '审核状态', width: '100', stutasColor: 'danger'},
  ],
  operationBtns: [
    {name: '审核', click: 'projectFunding', type: 'primary'},
    {name: '详情', click: 'projectDetail', type: 'info'},
  ],
  tableData: {
    total: 0,
    rows: []
  }
})
//查询条件
const selectSubmit = async (data) => {
  loading.value = true;
  let rows = await getFundingList(data).then(rows=>{
    dataSet.tableData.rows = rows.data.records;
    dataSet.tableData.total = rows.data.total;
  }).finally(() => {
    loading.value = false;
  });
}
// 重置
const resetSubmit = (data) => {
  selectSubmit(data);
}

onMounted(() => {
  selectSubmit({});
  projectTypeAll();
})
const getProjectType = (data) => {
  const foundType = type.value.find(item => item.label === data);
  return foundType ? foundType.value : undefined;
}
// 提交状态文字
const getStatusText = (data) => {
  switch (data.status) {
    case 0:
      return '待审核';
    case 1:
      return '通过';
    case 2:
      return '不通过';
    default:
      return '驳回';
  }
}
// 提交状态
const getSubmitColor = (data) => {
  switch (data) {
    case 0:
      return 'primary';
    case 1:
      return 'info';
    case 2:
      return 'danger';
    default:
      return 'success';
  }
}


// 导出
const exportProjectExcel = () => {
  if (handleIndex.value.length < 1) {
    ElMessage.error("请选择要导出的数据！")
    return
  }
  exportFundingList(handleIndex.value)
  ElMessage.success('导出成功')
}
const fundForm = reactive({
  id: '',
  status: 0,
  remark: '',
})

// 资金审核弹窗
const projectFunding = async (data) => {
  if (data.status !== 0){
    ElMessage.warning('该项目已审核，请勿重复操作！')
    return;
  }
  const projectData = await projectInfoById(data.projectId);
  operationName.value = '申请'
  title.value = '资金申请'
  isViewMode.value = false
  // 合并数据projectData 和data
  initialData.value = {...projectData.data, ...data}
  fundForm.id = data.id
  formItems.value = [{
    list: [
      {
        label: '项目名称',
        prop: 'title',
        type: 'input',
        disabled: true,
        rules: [
          {required: true, message: '请输入项目名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 30 个字符', trigger: 'blur'}
        ],
        placeholder: '请输入项目名称'
      },
      {
        label: '项目负责人',
        prop: 'username',
        type: 'input',
        disabled: true,
        rules: [
          {required: true, message: '请输入项目负责人', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        placeholder: '请输入项目负责人'
      },
      {
        label: '项目成员',
        prop: 'menber',
        type: 'input',
        disabled: true,
        rules: [
          {required: true, message: '请输入其他项目成员,多个以英文逗号分隔', trigger: 'blur'},
          {min: 2, max: 40, message: '长度在 2 到 40 个字符', trigger: 'blur'}
        ],
        placeholder: '请输入其他项目成员'
      },
      {
        label: '项目类型',
        prop: 'projectType',
        type: 'select',
        options: type.value,
        disabled: true,
        placeholder: '请选择项目类型'
      },
      {
        label: '指导老师',
        prop: 'instructor',
        type: 'input',
        disabled: true,
        placeholder: '请选择指导老师'
      },
      {
        label: '审核状态',
        prop: 'status',
        type: 'select',
        options: [
          {label: '待审核', value: 0},
          {label: '通过', value: 1},
          {label: '不通过', value: 2},
          {label: '驳回', value: 3},
        ],
        placeholder: '请选择审核结果'
      },
      {
        label: '备注',
        prop: 'remark',
        type: 'textarea',
        placeholder: '请输入审核备注'
      }
    ]
  }]
  dialogTemplateVisible.value = true
  dialogTemplateRef.value.dialogTemplateVisible = true;
}
// 详情
const projectDetail =async (data) => {
  operationName.value = "详情"
  title.value = '项目详情'
  const projectData = await projectInfoById(data.projectId);
  isViewMode.value = true
  formItems.value[0].list[7].disabled = false;
  initialData.value = {...data, ...projectData.data}
  dialogTemplateVisible.value = true
  dialogTemplateRef.value.dialogTemplateVisible = true;
}
const handleDialogSubmit = async (data) => {
  fundForm.status = data.status
  fundForm.remark = data.remark
  await editProjectFunding(fundForm).then(res=>{
    if (res.code === 0) {
      ElMessage.success('审核成功')
      dialogTemplateVisible.value = false
      dialogTemplateRef.value.dialogTemplateVisible = false;
    }
  })
  selectSubmit({});
}
</script>
<template>
  <div>
    <TableTemplate
      ref="registerTableRef"
      :data-set="dataSet"
      @exportProjectExcel="exportProjectExcel"
      @projectFunding="projectFunding"
      @projectDetail="projectDetail"
      @reset-submit="resetSubmit"
      @handleChange="handleChange"
      @select-submit="selectSubmit"
      :get-submit-color="getSubmitColor"
      :get-status-text="getStatusText"
      :loading="loading"
    />
    <DialogTemplate
      v-model="dialogTemplateVisible"
      ref="dialogTemplateRef"
      :title="title"
      :width="'900px'"
      :initial-data="initialData"
      :form-items="formItems"
      :is-view="isViewMode"
      @handleDialogSubmit="handleDialogSubmit"
      :operation-name="operationName"
    />
  </div>
</template>

<style scoped lang="scss">

</style>
